Redesign right SQL panel: responsive layout, larger query editor, scroll isolation by Copilot · Pull Request #6 · Devn913/SQL_Chess

Copilot · 2026-04-21T11:23:36Z

The right SQL panel had a cramped 3-row textarea (cutting off the default sample query), no scroll isolation (body could scroll on mobile), and poor layout across viewports.

CSS / Layout

SQL panel: flex: 0 0 32% (was 30%), min-width: 300px; hidden-panel override documented with comment
Scroll isolation: sql-content is the sole scroll region (overflow-y: auto, min-height: 0); body and outer containers remain overflow: hidden at all breakpoints

Responsive breakpoints (7 distinct queries):

Condition	SQL panel width	Notes
≥ 1920 px	26%, min 400 px	Larger textarea
≥ 1440 px	28%, min 340 px	—
default	32%, min 300 px	—
≤ 1024 px	36%, min 260 px	Tablet
≤ 900 px	stacked, `flex-grows`	Chess panel max 58 vh
≤ 600 px	—	Reduced paddings
height ≤ 500 px	—	Short landscape: compact textarea (3 rem min)

Query Textarea

rows 3 → 6; min-height: 7.5rem; max-height: 20rem; resize: vertical (was none)

Tests

225 Playwright tests across 9 viewport profiles (3 desktop, 2 tablet, 3 mobile, 1 ultrawide); 211 run, 14 correctly skipped for viewport-specific conditions
Assertions cover: panel visibility, textarea size/resize/prefill, scroll isolation (body overflow hidden, only sql-content scrolls), side-by-side vs. stacked layout, no horizontal overflow, board squareness, SQL toggle, block generation on moves, run-SQL execution and error display
CI workflow gains a test job (Playwright + Chromium); deploy now requires both validate and test to pass

…oll isolation, Playwright tests Agent-Logs-Url: https://github.com/Devn913/SQL_Chess/sessions/eb41956a-9637-482d-a220-c795c0d325b3 Co-authored-by: Devn913 <56478595+Devn913@users.noreply.github.com>

Copilot

Pull request overview

Improves the right-side SQL panel UX by making the layout responsive across viewports, enlarging the query editor, and isolating scrolling to avoid body scroll issues (especially on mobile), with automated Playwright coverage and CI enforcement.

Changes:

Updated CSS responsive rules for chess/SQL panels, including scroll isolation and viewport-specific sizing.
Increased SQL textarea rows and enabled vertical resizing with min/max height constraints.
Added Playwright responsive/layout tests plus a CI workflow job to run them.

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
`css/style.css`	Responsive layout + scroll isolation adjustments; SQL panel sizing and textarea sizing rules.
`index.html`	Increases SQL textarea `rows` from 3 → 6.
`tests/responsive.spec.js`	Adds Playwright tests validating layout, scrolling behavior, and key SQL-panel interactions.
`playwright.config.js`	Introduces Playwright config and multi-viewport projects.
`package.json`	Adds Playwright devDependency and test scripts.
`.github/workflows/deploy.yml`	Adds Playwright test job and makes deploy depend on validate + test.
`test-results/.last-run.json`	Adds Playwright run artifact file (likely unintended to commit).

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-04-21T15:54:58Z

+{
+  "status": "passed",
+  "failedTests": []
+}


test-results/.last-run.json is a generated Playwright artifact and will change across runs; committing it will create noisy diffs and potential merge conflicts. It should be removed from version control and the test-results/ directory should be added to .gitignore (similar to playwright-report/).

Suggested change

{

"status": "passed",

"failedTests": []

}

Copilot · 2026-04-21T15:54:58Z

+  test('chess panel and SQL panel are side-by-side on wide screens', async ({ page, viewport }) => {
+    if (!viewport || viewport.width < 1024) test.skip();
+    await openAndStartGame(page);


viewport is not a built-in Playwright test fixture, so destructuring async ({ page, viewport }) leaves viewport undefined. As written, the test.skip() guards will always trigger (or behave incorrectly), meaning these viewport-dependent layout assertions won’t actually run. Use page.viewportSize() or read the configured viewport via testInfo.project.use.viewport (or define a custom fixture) and base the skip conditions on that value.

Copilot · 2026-04-21T15:54:59Z

+/**
+ * Helper: open the page, dismiss the setup modal by playing as guest,
+ * then return the page for further assertions.
+ */
+async function openAndStartGame(page) {
+  await page.goto(PAGE_URL);
+  // Dismiss setup modal
+  await page.click('#btnPlayAsGuest');
+}


The JSDoc for openAndStartGame says it "return[s] the page", but the function doesn’t return anything. Either return page (so callers can use the return value) or update the comment to match the current behavior.

Copilot · 2026-04-21T15:54:59Z

+  use: {
+    /* Serve index.html directly via file:// so no server is needed */
+    baseURL: 'file://' + path.resolve(__dirname, 'index.html'),
+    headless: true,
+    screenshot: 'only-on-failure',
+    video: 'off',
+  },


use.baseURL is configured here, but the tests use their own PAGE_URL and call page.goto(PAGE_URL) directly, so baseURL is currently unused. Consider either switching tests to page.goto('/') (and drop the per-test PAGE_URL), or removing baseURL from the config to avoid having two sources of truth for the test entrypoint.

Copilot · 2026-04-21T15:54:59Z

+          node-version: '20'
+
+      - name: Install dependencies
+        run: npm ci


This job uses npm ci, but the repo ignores package-lock.json (see .gitignore:3) and there doesn’t appear to be a lockfile committed. npm ci will fail without a lockfile. Either commit a lockfile (and stop ignoring it) or switch this step to npm install (optionally with a pinned Node + caching) so CI can install Playwright reliably.

Suggested change

run: npm ci

run: npm install

redesign right SQL panel: responsive layout, larger query editor, scr…

dba09f8

…oll isolation, Playwright tests Agent-Logs-Url: https://github.com/Devn913/SQL_Chess/sessions/eb41956a-9637-482d-a220-c795c0d325b3 Co-authored-by: Devn913 <56478595+Devn913@users.noreply.github.com>

Copilot AI assigned Copilot and Devn913 Apr 21, 2026

Copilot created this pull request from a session on behalf of Devn913 April 21, 2026 11:23 View session

Devn913 marked this pull request as ready for review April 21, 2026 15:51

Copilot AI review requested due to automatic review settings April 21, 2026 15:51

Devn913 merged commit fdbb4f4 into main Apr 21, 2026
3 of 4 checks passed

Copilot started reviewing on behalf of Devn913 April 21, 2026 15:51 View session

Copilot AI reviewed Apr 21, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Redesign right SQL panel: responsive layout, larger query editor, scroll isolation#6

Redesign right SQL panel: responsive layout, larger query editor, scroll isolation#6
Devn913 merged 1 commit intomainfrom
copilot/redesign-right-section-homepage

Copilot AI commented Apr 21, 2026

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Apr 21, 2026

Uh oh!

Copilot AI Apr 21, 2026

Uh oh!

Copilot AI Apr 21, 2026

Uh oh!

Copilot AI Apr 21, 2026

Uh oh!

Copilot AI Apr 21, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

Copilot AI commented Apr 21, 2026

CSS / Layout

Query Textarea

Tests

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants